<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="TingGe Blog Agile agile JavaScript NodeJS">
  <meta name="author" content="TingGe<505253293@163.com>">
  <title>听歌实验室</title>
  <link type="image/x-icon" rel="shortcut icon" href="https://avatars3.githubusercontent.com/u/4074517?v=3&s=40" />
  <link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css" media="screen">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="/css/landing-page.css" rel="stylesheet">
  <link href="/css/screenshots.css" rel="stylesheet">
  <style media="screen">
    #main {
      padding-top: 55px;
    }
  </style>
  <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/lib/html2canvas/dist/html2canvas.min.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand topnav" href="/">
          <i class="fa fa-flask icon-3x" aria-hidden="true"></i> 听歌实验室
        </a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="/html/js.html">JavaScript/NodeJS</a>
          </li>
          <li>
            <a href="/index.html#agile">敏捷/项目管理(Agile/PMP)</a>
          </li>
          <li>
            <a href="/html/cloud-bi.html">云商业智能(Cloud BI)</a>
          </li>
          <li>
            <a href="/html/iot.html">物联网(WoT/IoT)</a>
          </li>
          <li>
            <a href="/html/me.html">关于我</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <div id="main" class="container">
    <div class="row">
      <div id="article" class="col-md-9 content-container">
        <h1 id="javascript-">JavaScript 和前端前沿技术探索</h1>
<p>本文最后更新于 2018年02月24日。</p>
<blockquote>
<p>“一套单页面应用，任何 path 访问都是服务端渲染、然后客户端路由，既解决 seo 问题，又解决渲染问题和前后端分离问题，并且为未来的 <a href="https://www.w3.org/2016/Talks/xq-0709-10th/">progresive web app</a> 做准备。套上 servie worker 就具有离线功能。所以，从前端开发者长期受益来看，放弃 node 是弊大于利的。”—— 语自 @<a href="https://github.com/Lucifier129">携程-工业聚</a></p>
<p>“集市” 和“大教堂”之争，推动着前端这个大生态的繁荣和演进。我把这个过程，总结为 “工程实践 + 标准化 =&gt; JavaScript 生态”。</p>
</blockquote>
<ol>
<li><a href="https://github.com/TingGe/develop-tools/">匠心之路</a></li>
<li><a href="https://tingge.github.io/html/react-redux-reactrouter.html">关于 React 系前端技术的思考</a></li>
<li><a href="https://tingge.github.io/html/redux-best-practices.html">一套编写 redux 最佳实践的案例</a></li>
<li><a href="https://tingge.github.io/html/Adding-Storybook-Style-Guide-to-a-Create-React-App.html">Create React App 应用中添加 Storybook 指南</a></li>
</ol>
<h2 id="web-">Web 前端</h2>
<blockquote>
<p>至今，没有最佳实践，大家对同一个问题通常有不同解法。这是 library 相对于 framework 的劣势。
目前，主流的三大 FRP 框架 React系、Angular 2系、Vue系 在相互融合。</p>
<p>另外，<a href="https://github.com/hyperapp/hyperapp">Hyperapp</a> + <a href="https://github.com/parcel-bundler/parcel">Parcel</a> 也是个值得关注的组合。<a href="https://github.com/daftcode/hyperapp-parcel-app">hyperapp-parcel-app 项目</a>和<a href="https://blog.daftcode.pl/hyperapp-parcel-71823bd93f1c">相关文章</a>。</p>
</blockquote>
<p>推荐的React设计模式、技术、技巧和窍门：<a href="https://vasanthk.gitbooks.io/react-bits/">React Bits</a></p>
<p>更多： <a href="https://github.com/thoughtbit/it-note/issues/12">React.js 资料和教程</a>、<a href="http://microjs.com/">microjs</a></p>
<table>
<thead>
<tr>
<th></th>
<th>技术</th>
<th>React系(Webpack+ React + Redux)</th>
<th>Progressive  Web  App</th>
<th>微信小应用</th>
<th>支付宝小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td>JS 编译器</td>
<td>TypeScript、<a href="https://flowtype.org/">Flow</a>、<a href="http://coffeescript.org/">CoffeeScript</a></td>
<td>Babel + ES6</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CSS 预处理</td>
<td><a href="http://sass-lang.com">Scss/Sass</a>、<a href="http://lesscss.org">Less</a>、<a href="http://learnboost.github.com/stylus">Stylus</a></td>
<td>sass-loader、<a href="https://github.com/webpack-contrib/style-loader">style-loader</a>、<a href="https://github.com/css-modules/css-modules">css-modules</a>、<a href="https://github.com/styled-components/styled-components">styled-components</a>、<a href="https://github.com/ben-eb/cssnano">cssnano</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CSS 后处理</td>
<td><a href="http://postcss.org/">PostCSS</a>、<a href="https://github.com/giakki/uncss">uncss</a>、<a href="https://github.com/addyosmani/critical">Critical</a>、<a href="https://github.com/css/csso">CSSO</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CSS 样式库</td>
<td><a href="https://github.com/una/CSSgram">CSSgram</a>（滤镜特效）、<a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">You-Dont-Need-JavaScript</a>（UI 组件）</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>web UI</td>
<td><a href="https://semantic-ui.com/">Semantic UI</a>、<a href="http://masonry.desandro.com/">Masonry</a>、<a href="http://getbootstrap.com/">Bootstrap</a>、<a href="http://getfuelux.com/">Fuel UX</a>、<a href="http://goratchet.com/">Ratchet</a>、<a href="http://www.materialscss.com/">Materialize</a>、<a href="http://www.material-ui.com/">Material-UI</a>、<a href="https://material.angularjs.org/latest/">Angular Material</a>、<a href="https://github.com/jgthms/bulma">Bulma</a>（基于Flexbox）、 <a href="https://github.com/1000ch/grd">Grd</a></td>
<td><a href="http://ant.design/">Ant-design</a>、<a href="https://fusion.design/">Fusion Design（Next）</a>、<a href="https://github.com/uxcore/uxcore">UXCore</a>、<a href="https://github.com/callemall/material-ui">Material-UI</a>、<a href="https://github.com/Semantic-Org/Semantic-UI-React">Semantic-UI-React</a>、<a href="https://github.com/palantir/blueprint">Blueprint</a>、<a href="https://github.com/react-bootstrap/react-bootstrap">React-Bootstrap</a>、<a href="https://github.com/react-toolbox/react-toolbox/">React-Toolbox</a>、<a href="https://github.com/grommet/grommet">Grommet</a>、<a href="https://github.com/OfficeDev/office-ui-fabric-react">Fabric</a>、<a href="https://github.com/mlaursen/react-md">React-md</a>、<a href="https://github.com/hyperapp/hyperapp">hyperapp</a>、<a href="https://github.com/gabrielbull/react-desktop">React Desktop</a>、</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>H5 UI</td>
<td><a href="http://sui.taobao.org/">SUI Mobile</a>、 <a href="http://frozenui.github.io/">FrozenUI</a>、 <a href="https://github.com/weui/react-weui">React-WeUI</a>、 <a href="https://framework7.io/">Framework7</a>、<a href="http://phonon.quarkdev.com/">Phonon</a>、<a href="http://foundation.zurb.com/">Foundation</a>、<a href="https://eucalyptuss.github.io/material-foundation/">Material Foundation</a></td>
<td>Fusion Design（Mext）</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>UI 组件</td>
<td><a href="https://github.com/bgrins/spectrum">spectrum</a>(Colorpicker)、<a href="https://github.com/jeromeetienne/jquery-qrcode">jquery-qrcode</a>、<a href="https://github.com/harvesthq/chosen/">chosen</a>、<a href="https://github.com/codemirror/codemirror">CodeMirror</a>、 <a href="http://johndyer.name/photoshop-like-javascript-color-picker/">jPicker</a>、<a href="https://github.com/superRaytin/paginationjs">paginationjs</a>、<a href="https://github.com/pieroxy/lz-string/">lz-string</a>、<a href="https://github.com/mholt/PapaParse">PapaParse</a>、<a href="https://github.com/VincentGarreau/particles.js">particles.js</a>、<a href="https://github.com/handsontable">handsontable</a>、<a href="https://github.com/ory/editor">ORY Editor</a>、<a href="https://github.com/basecamp/trix">Trix</a>、<a href="https://github.com/Nickersoft/push.js">push.js</a>、<a href="https://github.com/ramon82/zuck.js">zuck.js</a></td>
<td><a href="https://github.com/casesandberg/react-color">react-color</a>、<a href="https://github.com/STRML/react-grid-layout">React-Grid-Layout</a>、<a href="https://github.com/facebook/fixed-data-table">fixed-data-table</a>、<a href="https://github.com/schrodinger/fixed-data-table-2">fixed-data-table-2</a>、<a href="https://github.com/bvaughn/react-virtualized">react-virtualized</a>、react-transitive-number、 ckeditor、 echarts、 react-list、 sortablejs</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>后台管理模版</td>
<td><a href="https://github.com/puikinsh/gentelella">Gentelella Admin</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shim</td>
<td><a href="https://github.com/paulmillr/es6-shim">es6-shim</a>、<a href="https://github.com/es-shims/es5-shim/">es5-shim.js</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Polyfill</td>
<td><a href="https://github.com/rbuckton/ReflectDecorators">reflect-metadata</a></td>
<td>babel-polyfill、 ima.js-babel6-polyfill、 regenerator-runtime/runtime（async wait 的 polyfill）</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>DOM库</td>
<td>zepto、jQuery、</td>
<td>react-dom</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>HTML 5兼容旧浏览器</td>
<td><a href="https://github.com/aFarkas/html5shiv">html5shiv</a>、<a href="https://github.com/MaxArt2501/object-observe">object-observe</a>（Object.observe polyfill）、 <a href="https://github.com/viljamis/feature.js">Feature.js</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>多点触摸手势库</td>
<td><a href="http://hammerjs.github.io/">Hammerjs</a>、<a href="http://jgestures.codeplex.com/">jGestures</a>、</td>
<td><a href="https://github.com/JedWatson/react-hammerjs">react-hammerjs</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>工具库</td>
<td><a href="http://ramdajs.com/">ramdajs</a>、lodash、underscore、<a href="https://github.com/ecrmnn/collect.js">collect.js</a>、<a href="https://github.com/nmrugg/LZMA-JS/">LZMA-JS</a>、<a href="https://github.com/brix/crypto-js">crypto-js</a>、<a href="http://tether.io/">Tether</a>、<a href="https://github.com/hotoo/pinyin">PinYin</a>、Moment、<a href="https://github.com/adamwdraper/Numeral-js">Numeral</a>、<a href="https://github.com/taijinlee/humanize">humanize</a>、<a href="http://nosir.github.io/cleave.js/">Cleave.js</a>（格式化）、<a href="https://github.com/ccampbell/mousetrap">Mousetrap</a>、<a href="https://github.com/hughsk/flat">flat</a>、setRafTimeout</td>
<td><a href="https://github.com/thereactivestack/react-cookie">react-cookie</a>、<a href="https://github.com/BatuhanK/react-qart">react-qart</a>、<a href="https://github.com/JedWatson/classnames">classnames</a>、<a href="https://github.com/paypal/glamorous">glamorous</a>、<a href="https://github.com/threepointone/glamor">glamor</a>、d3-format、<a href="https://github.com/PrismJS/prism">prismjs</a>、<a href="https://github.com/ctrlplusb/react-sizeme">react-sizeme</a>、<a href="https://www.npmjs.com/package/clipboard">clipboard</a>、 detector、 pubsub-js、 query-string、 react-dropzone、 react-motion、 react-scroll、<a href="https://github.com/jondot/react-flight">react-flight</a>、<a href="https://www.npmjs.com/package/highlight.js">highlight.js</a>、<a href="https://www.npmjs.com/package/react-json-inspector">react-json-inspector</a>、<a href="https://www.npmjs.com/package/source-map">source-map</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>模版引擎</td>
<td>pug、Handlebars、Mustache、<a href="http://olado.github.io/doT/index.html">doT</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>异步Task跟踪，分析，错误记录、开发调试跟踪等</td>
<td><a href="https://github.com/angular/zone.js">zone.js</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>模块化</td>
<td>ES6 Modules、Browserify（CommonJS）、RequireJS（AMD）、SeaJS（CMD）、KMD.js（KMD）、<a href="https://github.com/systemjs/systemjs">systemjs</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>UI 层轻量级解决方案</td>
<td>Vue、Inferno、Preact</td>
<td>React、<a href="https://facebookincubator.github.io/react-vr/">React VR</a>、<a href="https://github.com/hyperapp/hyperapp">Hyperapp</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>高阶组件（HOC）</td>
<td></td>
<td><a href="https://github.com/acdlite/recompose">Recompose</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MV* 框架(路由、数据获取、状态管理)</td>
<td>Angular、<a href="http://aurelia.io/">Aurelia</a>、Avalon、Ember</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Pure Render</td>
<td></td>
<td>pure-render-decorator</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>动画</td>
<td><a href="https://github.com/michalsnik/aos">AOS</a>、<a href="https://github.com/daneden/animate.css">Animate.css</a></td>
<td>react-transition-group、<a href="https://www.npmjs.com/package/rc-queue-anim">rc-queue-anim</a>、<a href="https://github.com/jondot/react-flight">react-flight</a>、<a href="https://popmotion.io/">Popmotion</a>、<a href="https://motion.ant.design/">Ant Motion</a>、 <a href="https://github.com/chenglou/react-motion">React-Motion</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>表单</td>
<td></td>
<td><a href="https://github.com/erikras/redux-form">redux-form</a>、 <a href="https://github.com/jaredpalmer/formik">Formik</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>表单验证</td>
<td></td>
<td>React 内置的 propTypes、<a href="https://github.com/jquense/yup">Yup</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>路由控制，可选</td>
<td></td>
<td><a href="https://github.com/ReactTraining/react-router">react-router</a>、react-router-redux、<a href="https://github.com/jamesknelson/junctions">junctions</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>连接<em>React</em> 组件与 <em>Redux</em> store，可选</td>
<td></td>
<td><a href="https://github.com/reactjs/react-redux">React-Redux</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>中间件与异步操作</td>
<td>Async、Q</td>
<td><a href="https://github.com/gaearon/redux-thunk">redux-thunk</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>不可变数据结构</td>
<td></td>
<td><a href="https://github.com/facebook/immutable-js/">Immutable.js</a>、immutability-helper、seamless-immutable、  <a href="https://github.com/swannodette/mori">mori</a>、<a href="https://github.com/mquan/cortex">cortex</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>应用状态管理</td>
<td><a href="ngrx/store">ngrx/store</a></td>
<td>Redux（redux-promise/<a href="https://github.com/jasonslyvia/redux-sequence-action">redux-sequence-action</a>、<a href="https://github.com/indexiatech/redux-immutablejs">redux-immutablejs</a>）、Mobx、Dob、<a href="https://github.com/solkimicreb/react-easy-state">React Easy State</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>静态网页生成器（SSG）</td>
<td>Gitlab pages、 Netlify、 Surge、 Now static、 Hexo、<a href="https://docsify.js.org/">Docsify</a></td>
<td>Gatsby</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="-">模块化/组件化</h3>
<h4 id="web-mv-virtual-dom">Web MV*/Virtual DOM</h4>
<blockquote>
<p>基于组件（component-based）的构建方式。</p>
<p>MVVM 双向绑定、Virtual DOM，都是为解决直接操作 DOM 的“性能墙”。也有人提出了质疑，比如前端框架 Turbine 的开发者直言 《<a href="https://github.com/funkia/turbine/issues/32">Why Turbine doesn&#39;t use virtual DOM</a> 》</p>
<p>传统的 DOM 操作是直接在 DOM 上操作的，当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说，采用 Virtual DOM 并不会有优势。开发者就可以创建出可交互的 UI。</p>
</blockquote>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
<th>个人实例</th>
<th>相关</th>
<th>探讨</th>
</tr>
</thead>
<tbody>
<tr>
<td>React</td>
<td></td>
<td><a href="http://tingge.github.io/lab/popular-javascript/index.html">Github 中最流行的 JavaScript 项目（popular-javascript）</a></td>
<td>模板生成器 <a href="https://www.infoq.com/news/2016/07/create-react-app-cli-tool">create-react-app</a>、React boilerplate、<a href="https://github.com/reactjs/express-react-views">express-react-views</a>、 <a href="http://github.com/dabbott/react-express">React Express</a></td>
<td>组件和分形，参考《<a href="https://tingge.github.io/html/react-redux-reactrouter.html">关于 React 系前端技术的思考</a>》的“组合、分形与 Redux”</td>
</tr>
<tr>
<td>Vue</td>
<td></td>
<td><a href="/lab/vue-test/index.html">Hacker news(vue-test)</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/kbrsh/moon">Moon</a></td>
<td>类 Vue</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Angular</td>
<td></td>
<td><a href="/lab/my-books/index.html">我的书柜（my-books）</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="../lab/quickstart/">Angular 2</a></td>
<td>其创建理念是声明式编程应该用于构建用户界面以及编写软件构建，而命令式编程非常适合来表示业务逻辑</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Aurelia</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>React-Native</td>
<td>仅适用业务型场景</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="web-components-shadow-dom">Web Components/Shadow DOM</h4>
<blockquote>
<p><a href="http://robdodson.me/html5-template-tag-introduction/">模板</a>、<a href="http://robdodson.me/exploring-html-imports/">HTML引入</a>和 <a href="http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom-201/">Shadow DOM</a>（<a href="http://www.ituring.com.cn/article/177453">简介</a>、<a href="http://www.ituring.com.cn/article/177461">基础</a>、<a href="http://www.ituring.com.cn/article/177570">样式</a>、<a href="http://www.ituring.com.cn/article/177653">样式续</a>），所有这些技术的终极目标就是<strong>自定义元素（custom elements）</strong>。</p>
<p>使用 shadow DOM 的时候应该确保内容和表现的分离。</p>
</blockquote>
<ol>
<li><a href="http://webcomponents.org/">webcomponentsjs</a></li>
<li><a href="https://www.polymer-project.org/">Polymer</a></li>
</ol>
<h3 id="-">可视化</h3>
<blockquote>
<p>专题 <a href="https://github.com/TingGe/data-visualization">data-visualization</a></p>
</blockquote>
<ol>
<li><a href="/lab/d3-test/index.html">JavaScript应用领域（d3-test）</a></li>
<li><a href="https://www.npmjs.com/package/heatmap.js">heatmap.js</a>：Web 的动态 JavaScript 热图</li>
<li>recharts</li>
</ol>
<h3 id="-">工程化/工作流</h3>
<blockquote>
<p>专题 <a href="https://github.com/TingGe/develop-tools#工具">匠心之路—工具</a></p>
</blockquote>
<ol>
<li>Parcel：号称“零配置、构建快”的打包工具，应用场景和 Webpack 类似</li>
<li>Webpack：业务项目常用的打包工具</li>
<li><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/rollup-test">rollup-test</a>：库项目常用的打包工具</li>
<li><a href="https://tingge.github.io/lab/broccoli-babel-test/dist/index.html">broccoli-babel-test</a></li>
<li><a href="https://tingge.github.io/lab/grunt-babel-test/dist/index.html">grunt-babel-test</a></li>
<li><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/phantomjs-test">phantomjs-test</a></li>
<li><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/nightmare-test">nightmare-test</a></li>
</ol>
<h3 id="-">状态管理</h3>
<blockquote>
<p><code>不要把应用的逻辑和数据结构耦合在一起</code>——取自《Clean Architecture》</p>
</blockquote>
<p>数据状态可分为：</p>
<ul>
<li>domain-state 领域模型，比如user，order</li>
<li>ui-state 纯 UI 状态，比如一个弹窗的开闭，tab 是否 active</li>
<li>aspect-state 指一些切面，比如 redux-simple-router 需要在根 reducer上有个“routing”结点，redux-form 也需要自己的结点</li>
</ul>
<h4 id="mdv-model-driven-view-">MDV（Model Driven View）</h4>
<p>公式： <code>V = f(M)</code>。</p>
<p>Redux 可表述为 <code>state := actions.reduce(reducer, initState)</code></p>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
<th>探讨</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://redux.js.org/">Redux</a></td>
<td>优点：单一store；通过Action 触发、Reducer 中操作数据； 单向数据流（Component -&gt; Action -&gt; Middleware -&gt; Reducer -&gt; State）。特点可预测、可扩展。缺点：数据关联查询时，还是感觉不方便</td>
<td>分组与管理？</td>
</tr>
<tr>
<td><a href="https://github.com/mobxjs/mobx">MobX</a></td>
<td>通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP) 使状态管理简单、可扩展</td>
</tr>
</tbody>
</table>
<h4 id="mvi-model-view-intent-">MVI（Model View Intent）</h4>
<p>MVI 基于 Reactive 理念。相关：数据管道。解读：</p>
<ul>
<li>Intent，负责从外部的输入中，提取出所需信息；</li>
<li>Model，负责从Intent生成视图展示所需的数据；</li>
<li>View，负责根据视图数据渲染视图。</li>
</ul>
<p>提取为公式：<code>App := View(Model(Intent({ DOM, Http, WebSocket })))</code></p>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>RxJS</td>
<td>为处理异步操作而设计</td>
</tr>
<tr>
<td>CycleJS</td>
<td></td>
</tr>
<tr>
<td>xstream</td>
</tr>
</tbody>
</table>
<h3 id="react-redux-web-">React 和 Redux 之上的前端Web应用开发架构</h3>
<blockquote>
<p>关于 View 和状态机的最佳实践，是大多前端团队当下的主旋律。当然，选型是不会限于 React 和 Redux 的。</p>
</blockquote>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/keajs/kea">Kea</a></td>
<td>构建 React 和 Redux 之上的前端Web应用开发架构</td>
</tr>
</tbody>
</table>
<h3 id="-">数据结构可变&amp;不可变</h3>
<blockquote>
<p>可变和不可变是数据结构的属性，而不是语言的。</p>
</blockquote>
<p>关于此话题，可以参考《前端精读周刊》的  <a href="https://github.com/dt-fe/weekly/issues/14">Immutable 结构共享是如何实现的？</a></p>
<h4 id="-mutable-">可变（Mutable）</h4>
<p>可变（Mutable）数据耦合了 Time 和 Value 的概念。</p>
<p>单线程场景： 例如 JavaScript 对象本身可变。通常用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来规避被修改。缺点是造成了 CPU 和内存的浪费。</p>
<p>并发场景：如 Java 采用并发锁、Immutable Object 模式等方式来实现结构不可变。</p>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>lodash</td>
<td>deepCopy, mergeWith</td>
<td></td>
</tr>
<tr>
<td>Object.freeze、const 等</td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="-imutable-">不可变（Imutable）</h4>
<blockquote>
<p>React 系实践中，Pure Render + Immutable.js 搭配。非常适合数据状态为多层嵌套的场景。</p>
</blockquote>
<p>另外，也有些语言如 Clojure 则是原子上不可变的。其原理是 Persistent Data Structure（持久化数据结构），并通过 Structural Sharing（结构共享）来优化性能。</p>
<ul>
<li>其内部使用 Trie 数据结构存储，只要两个对象的 <code>hashCode</code> 相等，值就是一样的。这样的算法避免了深度遍历比较，性能非常好。</li>
<li>通常，结构共享与不可变数据结构相关联，但它也适用于结构上不可变的对象。</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/facebook/immutable-js/">Immutable.js</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>immutability-helper</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/indexiatech/redux-immutablejs">redux-immutablejs</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>seamless-immutable</td>
<td>只支持 Array 和 Object 两种数据类型</td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/swannodette/mori">mori</a></td>
<td>把<code>ClojureScript</code>里持久化数据结构的API支持带到了<code>JavaScript</code>里</td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/mquan/cortex">cortex</a></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="-">数据范式/扁平化</h3>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>normalizr</td>
</tr>
</tbody>
</table>
<h3 id="-">数据加载器</h3>
<blockquote>
<p>GraphQL 与 REST</p>
</blockquote>
<table>
<thead>
<tr>
<th></th>
<th>说明</th>
<th>相关</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://facebook.github.io/relay/">Relay</a></td>
<td>采用 GraphQL，用于构建数据驱动的 React 应用程序的 JavaScript 框架</td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/tonyhb/tectonic">tectonic</a></td>
<td>React 和 Redux 的声明性 REST 数据加载器</td>
</tr>
</tbody>
</table>
<h3 id="pwa">PWA</h3>
<ul>
<li><a href="https://github.com/TalAter/UpUp">UpUp</a></li>
</ul>
<h2 id="-">本地存储</h2>
<blockquote>
<p>离线访问是一套优秀 Web App 的必经之路。</p>
</blockquote>
<h3 id="-">浏览器提供</h3>
<h4 id="-">本地存储</h4>
<table>
<thead>
<tr>
<th>类别</th>
<th>技术</th>
<th>相关</th>
</tr>
</thead>
<tbody>
<tr>
<td>键值对 (KVP)</td>
<td>Local Storage、Session Sorage</td>
<td></td>
</tr>
<tr>
<td>数据库组织型</td>
<td>IndexedDB、Web SQL</td>
</tr>
</tbody>
</table>
<h4 id="-">应用缓存</h4>
<blockquote>
<p>HTML5 使用 <a href="http://www.whatwg.org/specs/web-apps/current-work/#applicationcache">ApplicationCache</a> 接口解决了由离线带来的部分难题。</p>
</blockquote>
<table>
<thead>
<tr>
<th>组成</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;html&gt;</code>的<code>manifest</code>属性</td>
<td>缓存文件清单。必须以<code>text/cache-manifest MIME</code>类型提供。注意：需在服务器上配置自定义文件类型。</td>
<td>页面中<code>&lt;html manifest=&quot;https://tingge.github.io/cache.mf&quot;&gt;</code>；服务(以Apache为例)中<code>AddType text/cache-manifest .appcache</code></td>
</tr>
<tr>
<td>window.applicationCache</td>
<td>更新缓存</td>
<td></td>
</tr>
<tr>
<td></td>
<td>AppCache 事件</td>
</tr>
</tbody>
</table>
<p>JS框架的实践</p>
<table>
<thead>
<tr>
<th>框架</th>
<th>说明</th>
<th>特点</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/localForage/localForage">localForage</a></td>
<td><a href="https://www.mozilla.org/en-US/">Mozilla</a> 出品，将本地存储操作 API 封装成了键值对 (KVP)风格</td>
<td>简单，拿来即用</td>
</tr>
<tr>
<td><a href="https://github.com/google/lovefield">lovefield</a></td>
<td>谷歌出品的，为 Web App 提供 SQL-like APIs 服务的本地关系型数据库</td>
<td>关联查询等能力较强</td>
</tr>
</tbody>
</table>
<h2 id="-javascript-universal-js-">通用 JavaScript（Universal JS）</h2>
<blockquote>
<p>Nodejs 目前主流的应用场景在于<strong>中间层：</strong>通过node进行模版渲染，处理部分业务逻辑。而真正的后端， 由专业的后端处理。</p>
<p>个人建议： UniversalJS 目前只是一种边际场景。推荐“Koa2 + Sequelize”的组合。另 Next.js 也值得一试。</p>
</blockquote>
<table>
<thead>
<tr>
<th>框架</th>
<th>说明</th>
<th>相关</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/zeit/next.js/">Next.js</a></td>
<td>通用 JavaScript 应用程序，基于 React，Webpack 和 Babel</td>
<td>快速创建支持服务端渲染的 React 应用的命令行辅助工具 <a href="https://open.segment.com/create-next-app">create-next-app</a></td>
</tr>
<tr>
<td><a href="http://www.electrode.io/">Electrode</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://react-server.io/">React Server</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/angular/universal">Universal Angular 2</a></td>
<td>Angular 2</td>
<td></td>
</tr>
<tr>
<td><a href="https://ember-fastboot.com/">Fastboot</a></td>
<td>Ember</td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/airbnb/hypernova">Hypernova</a></td>
<td>Airbnb 推出的一种 Universal JS 方案</td>
</tr>
</tbody>
</table>
<h3 id="-toolkit-">快速构建应用的工具包(Toolkit)</h3>
<table>
<thead>
<tr>
<th>工具包</th>
<th style="text-align:left">组合内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/VulcanJS/Vulcan">VulcanJS</a></td>
<td style="text-align:left">React, GraphQL &amp; Meteor</td>
</tr>
</tbody>
</table>
<h3 id="node-js-">Node.js 模块</h3>
<table>
<thead>
<tr>
<th>模块</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>os</td>
<td>Node.js 工具模块，提供一些基本的系统操作函数</td>
</tr>
<tr>
<td><a href="https://github.com/tj/co">co</a></td>
<td>用同步写法编写异步代码</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/json-logic-js">json-logic-js</a></td>
<td>构建复杂的规则，将它们序列化为 JSON，并在 JavaScript 中执行它们</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/mathjs">mathjs</a></td>
<td>一个数学库</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/ejs">ejs</a></td>
<td>嵌入式的 JavaScript 引擎</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/enums">enums</a></td>
<td>兼容 java 的枚举</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/node-schedule">node-schedule</a></td>
<td>类 Cron 和非类 Cron 的定时任务</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/nodemailer">nodemailer</a></td>
<td>邮件发送模块</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/request">request</a></td>
<td>简化的HTTP请求的客户端</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/svg2png">svg2png</a></td>
<td>转换 svg 为 png</td>
</tr>
<tr>
<td><a href="https://github.com/patriksimek/vm2">vm2</a></td>
<td>虚拟模块</td>
</tr>
<tr>
<td><a href="https://adodson.com/hello.js/">Hello.js</a></td>
<td>基于 OAuth 的浏览器端用户认证 SDK</td>
</tr>
<tr>
<td><a href="https://github.com/lovell/sharp">Sharp</a></td>
<td>图像调整模块</td>
</tr>
<tr>
<td><a href="https://adonisjs.com/">AdonisJS</a></td>
<td><strong>服务端渲染</strong> 的 MVC 框架， Laravel 的 NodeJS 版</td>
</tr>
<tr>
<td>csvtojson</td>
<td>csv 数据转 json</td>
</tr>
<tr>
<td>prompt</td>
<td>命令行提醒</td>
</tr>
<tr>
<td>commander</td>
<td>提供了用户命令行输入和参数解析强大功能</td>
</tr>
<tr>
<td>semver</td>
<td>语义化版本规则</td>
</tr>
</tbody>
</table>
<h3 id="web-restful-api">Web 服务 &amp;&amp; RESTful API</h3>
<blockquote>
<p>Node.js 一类的反应堆模式，不太适合做复杂的事务型业务。</p>
</blockquote>
<table>
<thead>
<tr>
<th>服务端框架</th>
<th>说明</th>
<th>个人小示例</th>
<th>相关</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://eggjs.org/">Egg</a></td>
<td>基于 Node.js 和 Koa 的企业级框架</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/koajs/koa/tree/v2.x">Koa2</a></td>
<td>借 babel 通过 async/await 来支持 ES6+</td>
<td><a href="https://github.com/TingGe/web-spiders">koa2-spider</a></td>
<td></td>
</tr>
<tr>
<td>Koa</td>
<td>通过 co 生成器支持 ES6</td>
<td><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/koa-app">koa-app</a></td>
<td></td>
</tr>
<tr>
<td><a href="http://hapijs.com/">Hapi</a></td>
<td>「配置大于约定」，业务逻辑必须和传输层进行分离</td>
<td><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/hapi-app">hapi-app</a></td>
<td></td>
</tr>
<tr>
<td>Feathers</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Now</td>
<td>“微服务”</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/keithwhor/nodal">Nodal</a></td>
<td>用来创建基于 PostgreSQL 的无状态的、分布式的服务</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/expressjs5-app">expressjs5-app</a></td>
<td>社区生态完善。<a href="http://clonn.blogspot.com/2016/04/expressjs-express.html">Express.js 黑历史</a>后，IBM 过度干预，使 <a href="https://github.com/dougwilson">Douglas Wilson</a> 在16年3月退出 5，个人建议转其它</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/expressjs/express">Express</a></td>
<td>一个路由和中间件 Web 框架，其自身只具有最低程度的功能</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Nodal</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/keystonejs/keystone">Keystone</a></td>
<td>以 Express 和 MongoDB 为基础搭建的 Node.js CMS 和 web 应用程序平台</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback">Loopback</a></td>
<td>集“Express ＋ ORM ＋ RESTFul API”于一体的后端解决方案。 关联查询有些坑，个人建议转其它</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="https://github.com/facebook/dataloader">DataLoader</a></td>
<td>一个通用工具。可用作应用程序数据提取层的一部分，为各种后端提供一致 API，并通过批处理和缓存减少对后端的请求。</td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="http://restify.com/">Restify</a></td>
<td>仅是 API 服务，可观测 Http 应用的延迟、特征等</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="-">实时服务</h3>
<ol>
<li><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/horizon-app">horizon-app</a></li>
<li><a href="https://github.com/TingGe/tingge.github.io/tree/master/lab/meteor-test">meteor-test</a></li>
</ol>
<h3 id="-node-">数据库 Node 框架</h3>
<blockquote>
<p>与业务场景对应，数据库分为<strong>事务型</strong>和<strong>分析型</strong>。</p>
<p>一般 “ORM + SQL” 或 “SQL 客户端 + SQL” 组合，来满足常规规模应用。当流量大到数据库扛不住时，加入 MQ 服务。</p>
<p>事务是恢复和并发控制的基本单位，保证 <strong>ACID</strong>：原子性、一致性、隔离性、持久性。</p>
</blockquote>
<h4 id="orm">ORM</h4>
<table>
<thead>
<tr>
<th>库</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/sequelize/sequelize">Sequelize</a></td>
<td>提供对 MySQL，MariaDB，SQLite ，PostgreSQL 和 MSSQL 数据库的简单访问</td>
</tr>
</tbody>
</table>
<h4 id="sql">SQL</h4>
<table>
<thead>
<tr>
<th>客户端/驱动</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/mysqljs/mysql">mysql</a></td>
<td>一个纯 javascript 实现的 nodejs 的 MySQL 客户端程序。MySQL 引擎比较好</td>
</tr>
<tr>
<td><a href="https://github.com/brianc/node-postgres">node-postgres</a></td>
<td>一个支持纯 JavaScript 和本地 libpq 库绑定的 nodejs 的 PostgreSQL 客户端程序。个人感觉这个更好用点</td>
</tr>
<tr>
<td><a href="https://github.com/vitaly-t/pg-promise">pg-promise</a></td>
<td>PostgreSQL 的 Promises/A+ 接口</td>
</tr>
<tr>
<td><a href="https://github.com/mapbox/node-sqlite3">sqlite3</a></td>
<td>SQLite  小、应用于移动端</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/hbase-client">hbase-client</a></td>
<td>Node.js的异步HBase客户端</td>
</tr>
</tbody>
</table>
<h4 id="nosql">NoSQL</h4>
<table>
<thead>
<tr>
<th>客户端/驱动</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/datastax/nodejs-driver">cassandra-driver</a></td>
<td>Cassandra 便于扩张</td>
</tr>
<tr>
<td><a href="https://github.com/NodeRedis/node_redis">redis</a></td>
<td>Redis 一般缓存、读写快</td>
</tr>
<tr>
<td><a href="https://github.com/LearnBoost/mongoose">Mongoose</a></td>
<td>MongoDB ODM（对象模型工具），即将 MongoDB 中数据转换为 JavaScript 对象以供在应用中使用</td>
</tr>
<tr>
<td><a href="https://github.com/mongodb/node-mongodb-native">mongodb</a></td>
<td>Mongo DB  原生的 NodeJS 驱动</td>
</tr>
<tr>
<td><a href="https://github.com/dscape/nano">nano</a></td>
<td>最简约的 CouchDB 客户端</td>
</tr>
<tr>
<td>level、<a href="https://github.com/rvagg/node-levelup">levelup</a> 和 leveldown</td>
<td>LevelDB</td>
</tr>
<tr>
<td><a href="https://github.com/hacksparrow/apoc">apoc</a></td>
<td>Neo4j</td>
</tr>
</tbody>
</table>
<h4 id="-">分布式</h4>
<blockquote>
<p>分布式的 <a href="https://zh.wikipedia.org/wiki/CAP%E5%AE%9A%E7%90%86">CAP</a> 理论，任何一个分布式系统无法同时满足 Consistency (一致性)、Availability (可用性) 和 Partition tolerance (分区容错性)。</p>
<p>其中， Consistency 是任何一个系统都不能放弃的，<strong>分布式事务</strong>亦是为了保证数据一致性，有时为了妥协另外两个特性，会放弃<strong>强一致性</strong>，来保证<strong>最终一致性</strong>。</p>
</blockquote>
<table>
<thead>
<tr>
<th>Node.js /浏览器 客户端库</th>
<th>对应的查询引擎</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://github.com/tagomoris/presto-client-node">presto-client-node</a></td>
<td>分布式查询引擎 Presto</td>
</tr>
<tr>
<td><a href="https://github.com/elastic/elasticsearch-js">elasticsearch</a></td>
<td>RESTful 搜索引擎 ElasticSearch</td>
</tr>
<tr>
<td><a href="https://www.npmjs.com/package/druid-query">druid-query</a></td>
<td>分布式实时处理系统 Druid</td>
</tr>
</tbody>
</table>
<h2 id="-">数据库</h2>
<table>
<thead>
<tr>
<th>类别</th>
<th>数据库</th>
<th>特点</th>
<th>应用场景</th>
</tr>
</thead>
<tbody>
<tr>
<td>SQL</td>
<td><a href="http://dev.mysql.com/downloads/mysql/">MySQL</a></td>
<td></td>
<td>分析</td>
</tr>
<tr>
<td></td>
<td><a href="https://www.postgresql.org/download/">PostgreSQL</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="https://www.sqlite.org/download.html">SQLite</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>NoSQL</td>
<td><a href="http://cassandra.apache.org/">Cassandra</a></td>
<td>列存储（Wide Column Store/Column-Family）数据库</td>
<td>日志；博客平台</td>
</tr>
<tr>
<td></td>
<td><a href="https://github.com/apache/hbase">HBase</a></td>
<td>分布式的、面向列的开源数据库</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="http://redis.io/download">Redis</a></td>
<td>键值（Key-Value）数据库</td>
<td>储存用户信息</td>
</tr>
<tr>
<td></td>
<td><a href="https://www.mongodb.com/download-center">MongoDB</a></td>
<td>面向文档（Document-Oriented）数据库</td>
<td>日志；分析</td>
</tr>
<tr>
<td></td>
<td><a href="https://docs.microsoft.com/zh-cn/azure/documentdb/">Azure DocumentDB</a></td>
<td>一个完全托管的 NoSQL 数据库服务</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="http://couchdb.apache.org/">CouchDB</a></td>
<td>同 MongoDB</td>
<td>同 MongoDB</td>
</tr>
<tr>
<td></td>
<td><a href="http://leveldb.org/">LevelDB</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="https://neo4j.com/download/">Neo4j</a></td>
<td>图（Graph-Oriented）数据库</td>
<td>关系性强的数据； 推荐引擎</td>
</tr>
<tr>
<td>分布式查询引擎</td>
<td>Presto</td>
<td></td>
<td></td>
</tr>
<tr>
<td>实时的分布式搜索和分析引擎</td>
<td><a href="https://www.elastic.co/downloads">ElasticSearch</a></td>
<td>面向文档的数据库</td>
<td>大数据；实时监控</td>
</tr>
<tr>
<td>分布式实时处理系统</td>
<td><a href="http://druid.io/">Druid</a></td>
<td>列存储，分布式</td>
</tr>
</tbody>
</table>
<h2 id="-">研发基础平台</h2>
<ol>
<li><a href="docker-registry.html">部署私有 Docker Registry 服务</a></li>
<li><a href="docker-gitlab.html">Docker 中搭建 GitLab服务器</a></li>
<li>Nginx</li>
<li>LDAP</li>
</ol>
<h2 id="-">附录</h2>
<h3 id="-">趋势</h3>
<ul>
<li><a href="https://frontendmasters.gitbooks.io/front-end-handbook-2017/">Front-End Developer Handbook 2017</a></li>
</ul>
<h3 id="-">计算机视觉库</h3>
<ul>
<li><a href="https://github.com/eduardolundgren/tracking.js/">tracking.js</a>：</li>
</ul>
<h3 id="nodejs">NodeJS</h3>
<ul>
<li><a href="nodejs.html">Node.js 解析</a></li>
<li><a href="https://cnodejs.org/topic/55714dfac4e7fbea6e9a2e5d">NodeJS 错误处理最佳实践</a></li>
<li><a href="http://www.admin10000.com/document/6715.html">10个常见的Node.js面试题</a></li>
</ul>
<h3 id="-">浏览器</h3>
<ul>
<li><a href="http://mp.weixin.qq.com/s/EqRfLbuta7RU5jePJCCWAg">Chrome 开发者控制台中，你可能意想不到的功能</a></li>
<li><a href="https://github.com/facebook/yoga">Facebook Yoga 跨平台的前端布局引擎</a></li>
<li><a href="http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html">浏览器内核的解析和对比</a></li>
</ul>
<h3 id="html-css">HTML &amp; 性能 &amp; CSS</h3>
<ul>
<li><a href="web-performance.html">Web 性能</a></li>
<li><a href="http://mp.weixin.qq.com/s/E_f0MzFFFAgtgISExBbp5w">JavaScript 启动性能瓶颈分析与解决方案</a></li>
<li><a href="http://geek.csdn.net/news/detail/135595">下一代 Web 应用模型 —— Progressive Web App</a></li>
<li><a href="html5.html">HTML 5</a></li>
<li><a href="http://ybshare.coding.io/share/flexible.htm">移动端适配方案</a>。大致思路是：<a href="https://github.com/amfe/lib-flexible">flexible.js</a> 或 <a href="https://github.com/unbug/generator-webappstarter/blob/master/app/templates/app/src/util/MetaHandler.js?utm_source=tuicool&amp;utm_medium=referral">metahandler.js</a></li>
<li><a href="http://mp.weixin.qq.com/s?__biz=MzAwNTAzMjcxNg==&amp;mid=2651424725&amp;idx=1&amp;sn=c19801bf880556470bb21f8af0cb0225">Houdini：CSS 领域最令人振奋的革新</a></li>
<li><a href="http://www.w3cplus.com/css/dirty-tricks-dark-corners-front-end-pt2.html">前端开发中的一些黑魔法Pt2</a></li>
<li><a href="http://www.w3cplus.com/preprocessor/creat-css-polygon-wiht-border-and-clip-path-property.html">Sass绘制多边形</a></li>
<li><a href="http://div.io/topic/1155">CSS布局之-水平垂直居中</a></li>
<li><a href="http://www.open-open.com/lib/view/open1449325854077.html">H5项目常见问题汇总及解决方案</a></li>
<li><a href="https://www.html5rocks.com/zh/tutorials/appcache/beginner/#toc-updating-cache">应用缓存初级使用指南</a></li>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage?hl=zh-cn">检查和管理存储、数据库与缓存</a></li>
</ul>
<h3 id="react-angular-vue-">React &amp; Angular &amp; Vue 等</h3>
<ul>
<li><a href="https://blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a">An imperative guide to forms in React</a>：React 表单组件 Formik</li>
</ul>
<ul>
<li><a href="https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c">Design Patterns with React Easy State</a>：React 状态管理 React Easy State</li>
</ul>
<ul>
<li><p><a href="https://medium.com/hyperapp/hyperapp-for-redux-refugees-2507c9dd1ddc">Hyperapp for Redux refugees</a>：React 替代品 Hyperapp，包含 view 和类 Redux 的状态管理</p>
</li>
<li><p><a href="http://jiji262.github.io/2016/04/29/create-your-own-react-boilerplate/">手把手教你基于ES6架构自己的React Boilerplate项目</a></p>
</li>
<li><a href="https://www.npmjs.com/package/react-scripts">Create React App</a>：一个 Facebook 的React Boilerplate项目</li>
<li><a href="http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&amp;mid=2247483973&amp;idx=1&amp;sn=01bcd0a60e8cfa0b93f4e82c7d21a677">让React组件变得可响应</a></li>
<li><a href="http://mp.weixin.qq.com/s/P9pZDvu7Zp8SkXvbWIHoHw">复杂单页应用的数据层设计</a></li>
<li><a href="http://www.christianalfoni.com/articles/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong">christianalfoni - Why we are doing MVC and FLUX wrong</a></li>
<li><a href="https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9">Webpack — The Confusing Parts</a></li>
<li><a href="http://www.iamaddy.net/2016/09/webpack-build-analyzing-statistics/">webpack build可视化统计分析</a></li>
<li><a href="http://www.infoq.com/cn/news/2016/11/next-js-universal-react-framewor">Next.js提供了基于React的简单通用JavaScript框架</a></li>
<li><a href="https://docs.google.com/presentation/d/13cALir2y7UtqrJZLzYPDidsV6OofJmamDqEMKNKz2P0/preview?slide=id.p">Angular 2 Keynote（September 27，2016）Slider</a></li>
</ul>
<h3 id="-">原理剖析</h3>
<ul>
<li><a href="http://www.jianshu.com/p/0e42799be566">深入理解React、Redux</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/21391101">理解 redux 中间件</a></li>
<li><a href="https://clojurefun.wordpress.com/2013/01/21/on-structural-immutability/">On Structural Immutability</a></li>
<li><a href="https://www.hexstreamsoft.com/articles/notes-tips-standard-common-lisp-symbols/themes/structural-sharing/">Structural sharingand destructive modification</a></li>
<li><a href="https://github.com/mperdikeas/js-structural-sharing">js-structural-sharing</a></li>
<li><a href="http://html5-demos.appspot.com/static/shadowdom-visualizer/index.html">ShadowDOM Visualizer</a></li>
<li><a href="http://www.html5rocks.com/zh/tutorials/webcomponents/template/">HTML&#39;s New Template Tag</a></li>
<li><a href="http://robdodson.me/html5-template-tag-introduction/">HTML5 Template Tag: Introduction</a></li>
<li><a href="http://robdodson.me/exploring-html-imports/">Exploring HTML Imports</a></li>
<li><a href="http://robdodson.me/shadow-dom-css-cheat-sheet/">Shadow DOM CSS Cheat Sheet</a></li>
</ul>

      </div>
      <div class="col-md-3" style="padding-top:20px;">
        <iframe src="http://githubbadge.appspot.com/tingge?a=0" style="border: 0;height: 142px;width: 200px;overflow: hidden;" frameBorder="0"></iframe>
      </div>
    </div>
  </div>
  <a id="html2canvas" title="截图下载-快照">&nbsp;</a>
  <script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/js/article.js" charset="utf-8"></script>
  <!-- justice.js https://github.com/okor/justice  -->
  <script src="/lib/justice.min.js" charset="utf-8"></script>
  <!-- instantclick -->
  <script src="/lib/instantclick.js" charset="utf-8"></script>
  <script type="text/javascript" data-no-instant>
    Justice.init();
  </script>
</body>

</html>
